<template>
	<div class="cate-tab1 swiper">
		<ol class="swiper-wrapper">
			<!-- 计算属性的返回结果[重组的数组],丢给循环操作 -->
			<li v-for="( list , index ) in pages" :key="index" class="swiper-slide" >
				<router-link to="/" v-for="item in list" :key="item.id" >
					<img :src="item.imgURL">
					<aside>
						<h3>{{item.title}}</h3>
						<label>{{item.msg}}</label>
						<p>￥{{item.price}}起<em>{{item.oldprice}}</em></p>
					</aside>
				</router-link>
			</li>
		</ol>
		<p class="cate-tab1_button"><button>加载更多<i class="iconfont" >&#xe622;</i></button></p>
		<!-- a标签,自定义选择器 -->
	</div>
</template>

<script>
	// 引入函数
	import {mapState} from 'vuex';
	import {
		onMounted
	} from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	// 3.swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);
	export default{
		name : 'CategoryTab1',
		props : {
			propscategoryTab1_son : {
				type : Object,
				default :function(){
					return {}
				}
			}
		},
		created(){
			let that = this;
			// 向dataHome.json文件发起异步请求
			this.axios.get('api/dataHome.json').then( (res)=>{
				let data = res.data.Homemsg[0];
				
				for( let index in res.data.Homemsg ){
					if( res.data.Homemsg[index].city == this.cityName ){
						data = res.data.Homemsg[index];
					}
				}
				
				this.tab1List = data.categoryVueList.tab1List;
			} ).catch( (error)=>{
				console.log( error );
			} )
		},
		data(){
			return {
				tab1List : []
			}
		},
		computed : {
			// 程序将其当成是属性而不是函数,是个变量[ 循环/判断 ]
			pages(){
				let arr = [];		// 空数组,重组一个二维数组
				let num = 4;		// 每页条数
				// 将原数组遍历
				this.tab1List.forEach( (item , index)=>{
					// i:每页的页码
					let i = Math.floor( index / num );
					// 将计算的页码放入新数组内,作为下标
					// 判断该下标是否已存在
					if( !arr[i] ){
						// 第一次出现
						arr[i] = [];
						arr[i].push( item );
					}else{
						// 已经出现过直接添加
						arr[i].push( item );
					}
				} )
				return arr;
			},
			...mapState(['cityName'])
		},
		updated(){
			new Swiper( '.cate-tab1' , {
				slidesPerView : 1,
				// slidesPerGroup : 3,
					
			} )
		}
	}
</script>

<style scoped >
	.cate-tab1_button{
		margin-bottom: 1rem;
	}
	.cate-tab1{
		height: 10.5rem;
	}
	.cate-tab1 ol{
		width: 100%;
		height: 90%;
		/* background-color: #006600; */
	}
	.cate-tab1 ol li{
		float: left;
		width: 100%;
		height: 100%;
		/* background-color: white; */
	}
	.cate-tab1 ol li a{
		text-decoration: none;
		float: left;
		width: 48%;
		color: black;
		margin-top: 0.3rem;
	}
	.cate-tab1 ol li a:nth-child(even){
		text-decoration: none;
		float: right;
		width: 48%;
		color: black;
	}
	.cate-tab1 ol li img{
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		border-radius: 0.3rem;
	}
	.cate-tab1 ol li aside label{
		/* 一行文字做省略号:省略号+溢出隐藏+禁止换行[超出宽度溢出隐藏且同省略号代替] */
		/* 多行文字做省略号:最后一行文字超过高度,溢出隐藏且用省略号代替 */
		overflow: hidden;
		display: -webkit-box;
		/* 与高度有关 */
		-webkit-line-clamp: 1;
		/* 超出盒子外的文本用省略号代替 */
		-webkit-box-orient: vertical;
		color: #909090;
	}
	.cate-tab1 ol li aside h3{
		font-size: 0.35rem;
		font-weight: bold;
	}
	.cate-tab1 ol li aside p{
		line-height: 0.5rem;
		font-size: 0.25rem;
		color: orange;
	}
	.cate-tab1 ol li aside em{
		margin-left: 0.2rem;
	}
	.cate-tab1 button{
		width: 90%;
		height: 1rem;
		border-radius: 0.2rem;
		border: 0;
		font-size: 0.35rem;
	}
	.cate-tab1 p{
		text-align: center;
	}
</style>